<template>
  <!--面包屑导航-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>工装夹具管理</el-breadcrumb-item>
                <el-breadcrumb-item>类型设置</el-breadcrumb-item>
            </el-breadcrumb>
        </el-col>
    </el-row>
  <!--查询条件区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-form v-model="searchFixtureType" style="margin: 15px 0px 0px 0px" inline>
                <el-form-item style="width: 200px;" label="设备类型编码">
                    <el-input v-model="searchFixtureType.fixtureTypeId"/>
                </el-form-item>
                <el-form-item style="width: 200px;" label="设备类型名称">
                    <el-input v-model="searchFixtureType.fixtureTypeName"/>
                </el-form-item>
                <!--项目状态设置-->
                <el-form-item label="设备类型类型">
                    <el-select placeholder="全部" style="width: 100px;" v-model="searchFixtureType.fixtureTypeType">
                        <el-option label="全部" :value="0"/>
                        <el-option label="定期维护" :value="1"/>
                        <el-option label="按使用次数维护" :value="2"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="search" type="primary">搜索</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="cleanSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
  <!--按钮功能区-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-button-group>
                <el-button @click="insert" type="primary" plain>
                    新增
                </el-button>
                <el-button @click="updateFT(chooseIds)" :disabled="chooseIds.length != 1" type="success" plain>
                    修改
                </el-button>
                <el-button @click="deleteFTList" :disabled="chooseIds.length == 0" type="danger" plain>
                    删除
                </el-button>
            </el-button-group>
        </el-col>
    </el-row>
  <!--表格主体-->
    <el-row style="margin: 5px 5px;">
        <el-col :span="24">
            <el-table
                    :data="fixtureTypeList"
                    broder
                    :stripe="true"
                    row-key="fixtureTypeId"
                    size="small"
                    @selection-change="changeChooses"
            >
                <el-table-column align="center" type="selection" width="55"/>
                <el-table-column align="center" width="100" label="设备类型编号">
                    <template #default="scope">
                        <el-link style="font-size: small" type="primary" @click="descFT(scope.row.fixtureTypeId)">{{scope.row.fixtureTypeId}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="150" prop="fixtureTypeName" label="设备类型名称"/>
                <el-table-column align="center" width="100" prop="fixtureTypeType" label="保养设备类型">
                    <template #default="scope">
                        <template v-if="scope.row.fixtureTypeType == 1">
                            定期维护
                        </template>
                        <template v-else>
                            按使用次数维护
                        </template>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="频率">
                    <template #default="scope">
                        {{scope.row.fixtureTypeRate}} /
                        {{unitList[scope.row.fixtureTypeRateUnit-1].dictDataTag}}
                    </template>
                </el-table-column>
                <el-table-column align="center" width="115" prop="fixtureTypeStatus" label="设备类型是否可用">
                    <template #default="scope">
                        <el-tag v-if="scope.row.fixtureTypeStatus == 1" type="primary">是</el-tag>
                        <el-tag v-else type="danger">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column width="240" align="center" prop="fixtureTypeNotes" label="设备类型备注"/>
                <el-table-column width="120" align="center" label="操作">
                    <template #default="scope">
                        <el-row>
                            <el-col :span="12">
                                <el-link @click="updateFT(scope.row.fixtureTypeId)" type="primary">
                                    <el-icon>
                                        <EditPen/>
                                    </el-icon>
                                    修改
                                </el-link>
                            </el-col>
                            <el-col :span="12">
                                <el-link @click="deleteFixtureType(scope.row.fixtureTypeId)" type="primary">
                                    <el-icon>
                                        <DeleteFilled/>
                                    </el-icon>
                                    删除
                                </el-link>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!--分页-->
  <!--分页栏-->
    <el-row style="margin: 5px 5px;">
        <!-- 监听页码的变化事件 -->
        <el-pagination @change="changePage" :total="total" background layout="prev, pager, next"/>
    </el-row>
    <!--新增数据弹窗-->
    <el-dialog
        v-model="dialogFixtureTypeInsert"
        title="新增类型"
    >
        <el-form v-model="insertFixtureType" label-width="auto">
            <el-form-item label="类型名称">
                <el-input v-model="insertFixtureType.fixtureTypeName"/>
            </el-form-item>
            <el-form-item label="保养类型">
                <el-select style="width: 220px;" v-model="insertFixtureType.fixtureTypeType">
                    <el-option label="定期维护" :value="1"/>
                    <el-option label="按使用次数维护" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item label="保养评率">
                <el-input-number :min="1"  v-model="insertFixtureType.fixtureTypeRate"/>
                <el-select placeholder="请选择频率" style="width: 125px" v-model="insertFixtureType.fixtureTypeRateUnit">
                    <template v-for="unit in unitList">
                        <el-option :label="unit.dictDataTag" :value="unit.dictDataValue"/>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="备注">
                <el-input type="textarea" v-model="insertFixtureType.fixtureTypeNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="insertFT()" type="primary">提交</el-button>
                <el-button @click="cancelInsertFixtureType">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--新增数据弹窗-->
    <el-dialog
        v-model="dialogFixtureTypeUpdate"
        title="修改类型"
    >
        <el-form v-model="updateFixtureType" label-width="auto">
            <el-form-item label="计划名称">
                <el-input v-model="updateFixtureType.fixtureTypeName"/>
            </el-form-item>
            <el-form-item label="计划类型">
                <el-select style="width: 220px;" v-model="updateFixtureType.fixtureTypeType">
                    <el-option label="定期维护" :value="1"/>
                    <el-option label="按使用次数维护" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item label="计划评率">
                <el-input-number :min="1"  v-model="updateFixtureType.fixtureTypeRate"/>
                <el-select placeholder="请选择频率" style="width: 125px" v-model="updateFixtureType.fixtureTypeRateUnit">
                    <template v-for="unit in unitList">
                        <el-option :label="unit.dictDataTag" :value="unit.dictDataValue"/>
                    </template>
                </el-select>
            </el-form-item>
            <el-form-item label="类型状态">
                <el-select style="width: 220px;" v-model="updateFixtureType.fixtureTypeStatus">
                    <el-option label="可用" :value="1"/>
                    <el-option label="禁用" :value="2"/>
                </el-select>
            </el-form-item>
            <el-form-item label="类型备注">
                <el-input type="textarea" v-model="updateFixtureType.fixtureTypeNotes"/>
            </el-form-item>
            <el-form-item>
                <el-button @click="updateFTPut" type="primary">提交</el-button>
                <el-button @click="cancelUpdate">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--详情窗口-->
    <el-dialog
        v-model="dialogFixtureTypeDesc"
        title="类型详情"
    >
        <el-descriptions v-model="descFixtureType">
            <el-descriptions-item label="类型编号">{{descFixtureType.fixtureTypeId}}</el-descriptions-item>
            <el-descriptions-item label="类型名称">{{descFixtureType.fixtureTypeName}}</el-descriptions-item>
            <el-descriptions-item label="工具类型">
                <template v-if="descFixtureType.fixtureTypeType == 1">
                    定期维护
                </template>
                <template v-else>
                    按使用次数维护
                </template>
            </el-descriptions-item>
            <el-descriptions-item label="类型状态">
                <el-tag type="primary" v-if="descFixtureType.fixtureTypeStatus == 1">正常</el-tag>
                <el-tag type="danger" v-else>停用</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="保养频率">{{descFixtureType.rate}}</el-descriptions-item>
            <el-descriptions-item label="类型备注">{{descFixtureType.fixtureTypeNotes}}</el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script setup>

import {onMounted, ref} from "vue";
import fixtureType from "@/api/fixture/fixtureType.js";
import {ArrowRight} from "@element-plus/icons-vue";
import dict from "@/api/dict.js";
import {ElMessage, ElMessageBox} from "element-plus";
import upkeep from "@/api/device/upkeep.js";
import fixture from "@/api/fixture/fixture.js";

let dialogFixtureTypeInsert = ref(false)
let dialogFixtureTypeUpdate = ref(false)
let dialogFixtureTypeDesc = ref(false)
let fixtureTypeList = ref([])
let searchFixtureType = ref({})
let pageNum = ref(1)
let total = ref(0)
//封装单位信息
let unitList = ref([])
//封装新增信息
let insertFixtureType = ref({})
//封装修改信息
let updateFixtureType = ref({})
//封装选中的ids
let chooseIds = ref([])
//封装详情信息
let descFixtureType = ref({})


function descFT(fixtureTypeId){
    fixtureType.loadUpdateInfo(fixtureTypeId,res=>{
        descFixtureType.value = res.data
        descFixtureType.value.rate = descFixtureType.value.fixtureTypeRate + "/" + unitList.value[res.data.fixtureTypeRateUnit - 1].dictDataTag
    })
    dialogFixtureTypeDesc.value = true
}

function deleteFTList(){
    let use = false
    chooseIds.value.forEach(id=>{
        fixture.loadTypeInuse(id,res=>{
            if (res.data.length != 0){
                use = true
            }
        })
    })
    setTimeout(()=>{
        if (use){
            ElMessage({
                type: "error",
                message: "当前类型正在被使用无法进行删除"
            })
            throw new Error("当前类型正在被使用无法进行删除")
        }else {
            ElMessageBox.confirm(
                '你确定要删除类型吗',
                '删除类型',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'error'
                }
            ).then(() => {
                let success = true;
                chooseIds.value.forEach(id => {
                    fixtureType.deleteFixtureType(id, res => {
                        loadFixtureTypeList()
                    })
                })
                ElMessage({
                    type: "success",
                    message: "删除成功"
                })
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    },100)

}

function changeChooses(value){
    let tempIds = new Array();
    value.forEach(upkeepType => {
        tempIds.push(upkeepType.fixtureTypeId)
    })
    chooseIds.value = tempIds
}

function deleteFixtureType(fixtureTypeId){
    fixture.loadTypeInuse(fixtureTypeId,res=>{
        if (res.data.length != 0){
            ElMessage({
                type: "error",
                message: "当前类型正在被使用无法进行删除"
            })
            throw new Error("当前类型正在被使用无法进行删除")
        }else {
            ElMessageBox.confirm(
                '你确定要删除类型吗',
                '类型项目',
                {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'error'
                }
            ).then(() => {
                fixtureType.deleteFixtureType(fixtureTypeId, res => {
                    if (res.code == 1) {
                        ElMessage({
                            type: "success",
                            message: "删除成功"
                        })
                        loadFixtureTypeList()
                    } else {
                        ElMessage({
                            type: "error",
                            message: "网络开了小差，请稍后重试"
                        })
                    }
                })
            }).catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    })

}

function updateFTPut(){
    fixtureType.updateFixtureType(updateFixtureType.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "跟新成功"
            })
            loadFixtureTypeList()
            cancelUpdate()
        } else if (res.code == 300) {
            ElMessage({
                type: "warning",
                message: "类型重复"
            })
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}

function insertFT(){
    if (insertFixtureType.value.fixtureTypeName == undefined  || insertFixtureType.value.fixtureTypeRateUnit == undefined || insertFixtureType.value.fixtureTypeRate == undefined || insertFixtureType.value.fixtureTypeType == undefined){
        ElMessage({
            type: "error",
            message: "缺少关键元素"
        })
        throw new Error("缺少关键元素")
    }
    insertFixtureType.value.fixtureTypeStatus = 1;
    fixtureType.insertFixtureType(insertFixtureType.value,res=>{
        if (res.code == 1) {
            ElMessage({
                type: "success",
                message: "添加成功"
            })
            loadFixtureTypeList()
            cancelInsertFixtureType()
        } else {
            ElMessage({
                type: "error",
                message: "添加失败"
            })
        }
    })
}
function cancelInsertFixtureType(){
    dialogFixtureTypeInsert.value = false
    insertFixtureType.value = new ref({})
}
function insert(){
    dialogFixtureTypeInsert.value = true;
}
function cancelUpdate(){
    updateFixtureType.value = new ref({})
    dialogFixtureTypeUpdate.value = false
}
function updateFT(fixtureTypeId){
    fixtureType.loadUpdateInfo(fixtureTypeId,res=>{
        updateFixtureType.value = res.data
    })
    dialogFixtureTypeUpdate.value = true
}

function changePage(value){
    pageNum.value = value
    loadFixtureTypeList()
}

function cleanSearch(){
    searchFixtureType.value = new ref({})
    loadFixtureTypeList()
}
function search(){
    console.log(searchFixtureType.value)
    loadFixtureTypeList()
}
function loadFixtureTypeList(){
    fixtureType.loadFixtureTypeList(searchFixtureType.value,pageNum.value,10,res=>{
        fixtureTypeList.value = res.list
        total.value = res.total
    })
}
function loadDictData(dictId,callback){
    dict.loadDictDataList(dictId,res=>{
        callback(res.data)
    })
}
onMounted(()=>{
    loadFixtureTypeList()
    loadDictData(4,res=>{
        unitList.value = res
    })
})
</script>


<style scoped>

</style>